<template>
	<view class="dmm-container dmm-container-grey">
		<u-search placeholder="搜索" height="72" margin="0 30rpx 20rpx" bgColor="#fff" placeholderColor="#d7d7d7" shape="square" v-model="search" :showAction="false" @search="getList({search, deviceType: deviceType.id})"></u-search>
		
		<view class="section summary">
		  <cl-device-types @select="onSelectDeviceType"></cl-device-types>
			
			<view class="row data">
				<view class="">
					<text class="text-content">可使用数量：</text>
					<text class="text">{{total}}</text>
				</view>
			</view>
			
			<u-button type="primary" text="划拨记录"  @click="uniHistory.push(`/pages/transferManage/records?deviceType=${deviceType.id}`)"></u-button>
		</view>
		
		<view class="section list">
			<u-checkbox-group
				v-model="selectArr"
				iconPlacement="right" 
				placement="column"
				@change="onSelectDevice">
				<u-checkbox
					shape="circle"
					v-for="(item, index) in list"
					:key="item.deviceSn"
					:label="item.deviceSn"
					:name="item.deviceSn"
					activeColor="#EFB702"></u-checkbox>
			</u-checkbox-group>
			
		</view>
		
		<view class="tip" v-if="!hasData">
			<text class="text text-tip">- {{list.length ? '没有数据了' : '暂无数据'}} -</text>
		</view>
		
		<view class="footer">
			
			<u-checkbox-group v-model="isSelectAll" @change="selectAllChange">
				<u-checkbox shape="circle" activeColor="#EFB702" label="全选当前页" name="isSelectAll"></u-checkbox>
			</u-checkbox-group>
			
			<view class="btns">
				<u-button text="起止号划拨" @click="uniHistory.push('/pages/transferManage/transfer?transferType=2')"></u-button>
				<u-button type="primary" text="下一步" @click="next"></u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapState, mapActions, mapMutations } from "vuex"
	import {deviceStatusEnum} from '@/common/constants';
	import {uniHistory} from '@/common/utils.js'
	
	export default {
		data() {
			return {
				deviceStatusEnum,
				search: '',
				deviceType: {name: '台卡', id: '00'},
				showTypes: false,
				isSelectAll: [],
				selectArr: []
			};
		},
		
		computed: {
			...mapState('transferManage', ['list', 'pageNum', 'hasData', 'total', 'selectedMap']),
		},
		
		methods: {
			...mapMutations('transferManage', ['save']),
			...mapActions('transferManage', ['getList',]),
			onSelectDeviceType(deviceType) {
				this.deviceType = deviceType
				
				this.getList({deviceType: deviceType.id});
			},
			
			onSelectDevice(selectArr) {
				// console.log(selectArr)
			},
			
			selectAllChange(val) {
				const isSelectAll = !!val[0]
				const selectArr = []
				
				if (isSelectAll) {
					this.list.map(item => selectArr.push(item.deviceSn))
				}
				
				this.selectArr = selectArr
			},
			
			next() {
				if (!this.selectArr.length) return message.error('请先选择要划拨的设备')
	
				this.save({field: 'transferArr', payload: this.selectArr})
				
				uniHistory.push(`/pages/transferManage/transfer?transferType=1&deviceNum=${this.selectArr.length}&deviceType=${JSON.stringify(this.deviceType)}`)
			}
		},
		
		onShow() {
			this.getList({deviceType: this.deviceType.id});
		},
		
		onReachBottom() {
			if (this.hasData) this.getList({pageNum: this.pageNum + 1, deviceType: this.deviceType.id, search: this.search})
		},
	}
</script>

<style lang="scss">
	.dmm-container {
		padding-bottom: 140rpx;
		box-sizing: border-box;
	}
	
	.section {
		border-radius: $uni-border-radius-lg;
		background-color: #fff;
	}
	.list {
		.u-checkbox-group {
			/deep/ .u-checkbox {
				height: 118rpx;
				line-height: 118rpx;
				border-bottom: 1rpx solid $u-bg-color;
				
				.u-checkbox__icon-wrap {
					height: 52rpx !important;
					width: 52rpx !important;
					border-color: $u-primary !important;
					
					text {
						font-size: 50rpx !important;
					}
				}
				
				> text {
					font-size: $uni-font-size-base;
					font-weight: 700;
					color: $u-main-color !important;
				}
			}
		}
	}
	
	.footer {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 118rpx;
		padding: 0 30rpx;
		background-color: #fff;
		box-sizing: border-box;
		
		.u-checkbox {
			/deep/ .u-checkbox__icon-wrap {
				height: 52rpx !important;
				width: 52rpx !important;
				border-color: $u-primary !important;
				
				text {
					font-size: 50rpx !important;
				}
			}
			
			/deep/ .u-checkbox__text {
				color: $u-main-color !important;
			}
		}
		
		.btns {
			display: flex;
			width: 378rpx;

			.u-button {
				height: 58rpx !important;
			}
			
			.u-button--normal {
				margin-right: 30rpx;
				border-color: $u-primary !important;
				
				/deep/ .u-button__text {
					color: $u-primary;
					font-size: $uni-font-size-base;
					
				}
			}
			
			.u-button--primary {
				margin-right: 0;
				/deep/ .u-button__text {
					color: #fff;
					font-size: $uni-font-size-base;
					
				}
			}
		}
	}
	
	.u-search {
		/deep/ .u-search__content {
			border-radius: 16rpx !important;
		}
	}
	
	.summary {
		padding: 40rpx 30rpx;
		position: relative;
		
		.data {
			margin-top: 30rpx;
			> view {
				margin-right: 90rpx;
			}
			
			.text {
				font-weight: 700;
			}
		}
		
		.u-button--primary {
			height: 58rpx;
			position: absolute;
			right: 30rpx;
			top: 66rpx;
			width: 220rpx !important;
		}
	}
	
	.tip {
		text-align: center;
	}
</style>
